<template>
  <van-nav-bar title="获取图片base64" />
  <div>
    <!-- Your HTML here -->
    <h4>获取方式</h4>
<van-radio-group v-model="param.sourceType" >
  <van-radio name="camera">拍照</van-radio>
  <van-radio name="album">相册</van-radio>
  <van-radio name="all">拍照或相册</van-radio>
</van-radio-group>

<van-button type="primary" style="margin-top: 20px" @click="startGetBase64" :loading="loading"
      >选择图片</van-button
    >

    <div>
<van-image v-if="loading"
  :src="resultStr"
  fit="contain"
  width="100"
  height="100"
  lazy-load
>
<template v-slot:loading>
    <van-loading type="spinner" size="20" />
  </template>
</van-image>
</div>
   <img :src="resultStr" style="width: 150px;">
   <div  style="width:200px">
    {{ resultStr }}
   </div>

  </div>
</template>

<script setup lang='ts' name='' >
// Your script here

import { reactive, ref } from "vue";

let param = reactive({
  sourceType:"album",
});


const resultStr = ref("")
const loading = ref(false);

function startGetBase64() {
  resultStr.value = '';

  (window as any).whJSBridge.getImgBase64(getBase64Impl, JSON.stringify(param)).then(
     (res:any)=>{
        console.log("打开图片成功")
        loading.value = true;
    }).catch((err:any) => {
    console.log(err);
    alert(err);
  })
}

function getBase64Impl(dataStr:any) {
  const data = JSON.parse(dataStr); 

  console.log("getBase64Impl",data.data.base64);
  if (data.flag) {
    if (data.data.hasMore) {
      loading.value = true;
      resultStr.value += data.data.base64;
    } else{
      loading.value = false;
      resultStr.value += data.data.base64;
    }

    return;
  }
}

</script>

<style scoped >
/* Your styles here */
</style>